<template>
	<view>
		<view class="container">
			<map id='map' :latitude="latitude" :longitude="longitude" :markers="covers"
				style="width: 100%; height: 100vh;" :polyline="polyline">
			</map>


			<view class="bottom-layout">

				<view class="day-layout">
					<text class="day-text" @click="daySel(0)">今天</text>
					<text class="day-text" @click="daySel(1)">昨天</text>
					<text class="day-text" @click="daySel(2)">前天</text>
				</view>

				<view class="time-layout">

					<view style="display: flex;" @click="selTime(0)">
						<u-icon name="clock" color="#FBCC0E"></u-icon>
						<text style="margin-left: 5rpx;">{{startTime}}</text>
					</view>

					<view style="display: flex;" @click="selTime(1)">
						<u-icon name="clock" color="#FF6F49"></u-icon>
						<text style="margin-left: 5rpx;">{{endTime}}</text>
					</view>

				</view>

				<view style="display: flex;width: 80%;">
					<text style="margin: 20rpx;" class="btn-item" @click="getOrderTrack">开始查询</text>
				</view>

				<view style="height: 2rpx;background-color: #efefef;width: 98%;">
				</view>

				<view style="display: flex;align-items: center;width: 90%;margin-top: 25rpx;" @click="playControl()">
					<u-icon size="18" :name="isStart?'pause-circle':'play-circle'" color="#1573FF"
						:customStyle="{'margin-right':'10rpx'}"></u-icon>

					<u-line-progress :percentage="percentage" activeColor="#1573FF"></u-line-progress>

				</view>

			</view>

			<!-- <view class="btnBox">
				<button :disabled="isDisabled" @click="start" class="btn">轨迹回放</button>
			</view> -->

		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="startShow" v-model="value1" :maxDate="value2" mode="datetime" @confirm="timeConfirm"
			@cancel="startShow=false"></u-datetime-picker>

		<!-- 结束时间 -->
		<u-datetime-picker :show="endShow" v-model="value2" :minDate="value1" mode="datetime" @confirm="timeConfirm"
			@cancel="endShow=false"></u-datetime-picker>

	</view>
</template>

<script>
	// import * as orderApi from '@/api/order-api.js'
	export default {
		computed: {

		},
		data() {
			return {
				percentage: 0,
				value1: Number(new Date()) - 24 * 3600 * 1000,
				value2: Number(new Date()),
				startShow: false,
				endShow: false,
				map: null,
				latitude: '',
				longitude: '',
				isDisabled: false,
				isStart: false,
				playIndex: 1,
				// 标记点
				covers: [],
				// 轨迹点坐标集合
				points: [],
				// 轨迹线
				polyline: [],
				intentData: {},
				startTime: '',
				endTime: '',
				pickerType: 0,
				testData: {
					trackPlayList: [
						// {
						// 	loc_time: 1664294400000,
						// 	latitude: 32.082688653559,
						// 	longitude: 112.62590001877,
						// 	radius: 0.0,
						// 	direction: 255,
						// 	speed: 23.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548346608,
						// 	latitude: 32.082788653559,
						// 	longitude: 112.62690001877,
						// 	radius: 0.0,
						// 	direction: 258,
						// 	speed: 23.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548347608,
						// 	latitude: 32.082888653559,
						// 	longitude: 112.62790001877,
						// 	radius: 0.0,
						// 	direction: 275,
						// 	speed: 21.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548349608,
						// 	latitude: 32.082988653559,
						// 	longitude: 112.62890001877,
						// 	radius: 0.0,
						// 	direction: 295,
						// 	speed: 21.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548350608,
						// 	latitude: 32.083088653559,
						// 	longitude: 112.62990001877,
						// 	radius: 0.0,
						// 	direction: 155,
						// 	speed: 23.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548351608,
						// 	latitude: 32.083188653559,
						// 	longitude: 112.63090001877,
						// 	radius: 0.0,
						// 	direction: 125,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.083288653559,
						// 	longitude: 112.63190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						
						
						
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.083288653559,
						// 	longitude: 112.63190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.085288653559,
						// 	longitude: 112.63190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.086288653559,
						// 	longitude: 112.63190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.089288653559,
						// 	longitude: 112.63190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.089288653559,
						// 	longitude: 112.65190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
						// {
						// 	loc_time: 1548352608,
						// 	latitude: 32.089288653559,
						// 	longitude: 112.67190001877,
						// 	radius: 0.0,
						// 	direction: 105,
						// 	speed: 25.352839469217,
						// 	height: 0.0,
						// 	coord_type_input: null,
						// },
					],

				},
			};
		},
		onReady() {
			// 创建map对象
			this.map = uni.createMapContext('map');
		},
		onLoad(op) {
			this.intentData = getApp().globalData.intentMonitorData

			getApp().globalData.intentMonitorData = null

			console.log('this.intentData', JSON.stringify(this.intentData));

			this.latitude = this.intentData.deviceInfo.latitude
			this.longitude = this.intentData.deviceInfo.longitude

			this.covers = [{
				id: 1,
				width: 26,
				height: 15,
				latitude: this.latitude,
				longitude: this.longitude,
				iconPath: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
			}]


			this.startTime = uni.$u.timeFormat(Number(new Date()) - 24 * 3600 * 1000, 'yyyy-mm-dd hh:MM');
			this.endTime = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM');


			this.getOrderTrack();
		},
		methods: {
			daySel(dayType) {
				switch (dayType) {
					case 0:
						//今天
						this.startTime = uni.$u.timeFormat(Number(new Date(new Date().setHours(0, 0, 0, 0))),
							'yyyy-mm-dd hh:MM');
						this.endTime = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM');
						break
					case 1:
						//昨天
						this.startTime = uni.$u.timeFormat(Number(new Date(new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 *
							1000)), 'yyyy-mm-dd hh:MM');
						this.endTime = uni.$u.timeFormat(Number(new Date(new Date().setHours(0, 0, 0, 0) - 1000)),
							'yyyy-mm-dd hh:MM');
						break
					case 2:
						//前天
						this.startTime = uni.$u.timeFormat(Number(new Date(new Date().setHours(0, 0, 0, 0) - 2 * 24 * 60 *
							60 * 1000)), 'yyyy-mm-dd hh:MM');
						this.endTime = uni.$u.timeFormat(Number(new Date(new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 *
							1000 - 1000)), 'yyyy-mm-dd hh:MM');
						break
				}
			},


			selTime(type) {
				this.pickerType = type
				switch (type) {
					case 0:
						this.startShow = true
						break
					case 1:
						this.endShow = true
						break
				}
			},

			timeConfirm(e) {
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');

				switch (this.pickerType) {
					case 0: //开始时间
						this.startShow = false;
						this.startTime = timeStr;
						break
					case 1: //结束时间
						this.endShow = false;
						this.endTime = timeStr;
						break
				}
			},

			getOrderTrack() {
				let _this = this

				uni.showLoading()
				this.$u.api.vehiclemonitorGetTrack({
					deviceNo: this.intentData.deviceInfo.deviceNo,
					deviceManufacturerNumber: this.intentData.deviceInfo.deviceManufacturerNumber,
					trackStartTime: this.startTime,
					trackEndTime: this.endTime,
				}).then(res => {
					uni.hideLoading()
					

					var trackPlayList = [];
					// trackPlayList = _this.testData.trackPlayList
					trackPlayList = res.trackPlayList
					
					_this.points = []
					_this.polyline = []
					
					if (trackPlayList.length > 0) {
						trackPlayList.forEach((item, index) => {
							if (index === 0) {
								_this.covers[0].latitude = _this.latitude = parseFloat(item.latitude);
								_this.covers[0].longitude = _this.longitude = parseFloat(item.longitude);
							}
							let point = {
								longitude: item.longitude,
								latitude: item.latitude
							}
							_this.points.push(point);
					
						})
						// 加载完数据后画线
						_this.polyline = [{
							points: _this.points,
							color: '#22ab89',
							width: 4,
							dottedLine: false,
							arrowLine: true,
						}];
					
					}
					
					_this.map.includePoints({
						padding:[20,20,100,20],
						points:_this.points
					})
					
				}).catch(e => {
					uni.hideLoading()

				})
			},

			playControl() {
				let _this = this
				
				uni.$u.throttle(()=>{
					console.log('点击了');
					
					if (_this.isStart) {
						//暂停
						_this.isStart = false
					} else {
						_this.start()
					}
				}, 1000)
				
				
			},


			start() {

				//开始
				if (this.points.length > 0) {
					this.isStart = true;
					this.isDisabled = true;
					let data = this.points;
					let len = data.length;
					let datai = data[this.playIndex];
					let _this = this;

					_this.map.translateMarker({
						markerId: 1,
						autoRotate: true,
						rotate: 0,
						destination: {
							longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
							latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
						},
						duration: 700,
						complete: function() {
							_this.playIndex++;
							
							_this.percentage = Math.round((_this.playIndex/len)*100)
							
							if (_this.playIndex < len) {
								// _this.start(_this.playIndex, data);
								if(_this.isStart){
									_this.start();
								}
							} else {
								console.log('okokok');
								uni.showToast({
									title: '播放完成',
									duration: 1400,
									icon: 'none'
								});
								_this.playIndex = 0;
								_this.isStart = false;
								_this.isDisabled = false;
							}
						},
						animationEnd: function() {

						},
						fail(e) {
							// 轨迹回放失败
						},
					});
				} else {
					this.$u.toast('轨迹数据未上报');
				}



			},


		},
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.btnBox {
		width: 750rpx;
		position: absolute;
		bottom: 60rpx;
		z-index: 99;
		display: flex;
		justify-content: space-around;

		.btn {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(to right, #1bb487 0%, #08876b 100%);
		}
	}

	.bottom-layout {
		position: fixed;
		bottom: 0;
		left: 10rpx;
		right: 10rpx;
		height: 320rpx;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.day-layout {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 20rpx 0;
		width: 90%;
	}

	.day-text {
		font-size: 28rpx;
		color: #333;
	}

	.time-layout {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;

	}
</style>
